<template>
  <div>
    <div class="box">
      <div class="header">
        <van-nav-bar left-arrow @click-left="onClickLeft" />
        <p>置换商城</p>
      </div>
      <div class="main">
        <div class="ban"></div>
        <div class="lists">
          <div class="list" v-for="item in 5">
            <div class="listImg"></div>
            <p class="topic">【立赚￥199】漫步者</p>
            <div class="price">
              <span>￥200.00</span>
              <div class="barter">去置换</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <van-icon name="arrow-left" class="c" />
        <van-icon name="arrow" class="c" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};
</script>
<style scoped>
.box {
  height: 667.2px;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: rgba(248, 248, 248, 100);
  position: relative;
}
.header .b {
  margin-left: 9px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}
.header p {
  width: 232px;
  height: 26px;
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  font-weight: 700;
  font-family: SourceHanSansSC-medium;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.main {
  flex: 1;
}
.ban {
  width: 334px;
  height: 100px;
  background-color: rgba(206, 206, 206, 100);
  margin: 0 20px 8px 20px;
}
.lists {
  margin: 0 20px;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.listImg {
  width: 159px;
  height: 159px;
  border-radius: 8px;
  background-color: rgba(206, 206, 206, 100);
  margin: 8px 0 14px 0;
}
.topic {
  width: 159px;
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  font-family: PingFangSC-regular;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price span {
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  font-family: PingFangSC-regular;
}
.barter {
  width: 48px;
  height: 23px;
  background-color: rgba(197, 197, 197, 100);
  color: rgba(0, 0, 0, 1);
  font-size: 12px;
  font-family: SourceHanSansSC-regular;
  text-align: center;
  line-height: 23px;
}
.footer {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(248, 248, 248, 100);
}
.footer .c {
  background-color: rgba(248, 248, 248, 100);
}
</style>
